<template>
  <iLayout left>
    <section slot="title">设备列表</section>
    <section slot="operation">
      <!-- <el-button round type="primary" @click="addTypeClick">新建设备类型</el-button> -->
      <el-button round type="success" @click="addClick">新建设备</el-button>
    </section>
    <section slot="left">
      <el-table :data="$store.state.instrumentList" @row-click="rowClick" :highlight-current-row="true" :stripe="true" style="width: 100%">
        <el-table-column label="设备类型" prop="name"> </el-table-column>
        <!-- <el-table-column width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="setTypeClick(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="dleTypeClick(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </section>
    <section slot="right" class="h95 flex_column flex_sb">
      <el-table v-loading="loading" :data="tools_list" style="width: 100%">
        <!-- <el-table-column label="设备名称" prop="deviceName"></el-table-column> -->
        <el-table-column label="规格型号" prop="specificationsModel"></el-table-column>
        <el-table-column label="出厂编号" prop="factoryNumber"></el-table-column>
        <!-- <el-table-column label="保管负责人" prop="custodian"></el-table-column>
        <el-table-column label="检定结果" prop="testResults"></el-table-column> -->
        <el-table-column width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="setClick(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="delClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination :page-size="20" :pager-count="7" layout="prev, pager, next" :total="tools_list.total">
      </el-pagination> -->
    </section>
    <!-- dialogs -->
    <section class="dialogs">
      <!-- 添加设备类型对话框 -->
      <el-dialog title="添加一个新的设备类型" :visible.sync="dialog.addType" width="30%">
        <div>
          <DeviceTypeForm ref="addTypeForm" :fromData="addType"></DeviceTypeForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addType = false">取 消</el-button>
          <el-button type="primary" @click="addTypeFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改设备类型对话框 -->
      <el-dialog title="修改设备类型" :visible.sync="dialog.setType" width="30%">
        <div>
          <DeviceTypeForm ref="setTypeForm" :fromData="setType"></DeviceTypeForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.setType = false">取 消</el-button>
          <el-button type="primary" @click="setTypeFun">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除设备类型对话框 -->
      <el-dialog title="" :visible.sync="dialog.delType" width="30%">
        <div>确定删除这个设备类型吗</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.delType = false">取 消</el-button>
          <el-button type="primary" @click="dleTypeFun">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加设备对话框 -->
      <el-dialog title="添加一个新的设备" :visible.sync="dialog.add" width="30%">
        <div class="h50vh">
          <DeviceForm ref="addForm" :fromData="add" :options="instrumentList"></DeviceForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.add = false">取 消</el-button>
          <el-button type="primary" @click="addFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改设备对话框 -->
      <el-dialog title="修改设备的信息" :visible.sync="dialog.set" width="30%">
        <div>
          <DeviceForm ref="setForm" :fromData="set" :options="instrumentList"></DeviceForm>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.set = false">取 消</el-button>
          <el-button type="primary" @click="setFun">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除设备类型对话框 -->
      <el-dialog title="" :visible.sync="dialog.del" width="30%">
        <div>确定删除这个设备吗</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.del = false">取 消</el-button>
          <el-button type="primary" @click="delFun">确 定</el-button>
        </span>
      </el-dialog>
    </section>
    <!-- dialogs -->
  </iLayout>
</template>

<script>
import * as api from '../../api/private/intrument'
import DeviceForm from './formComponent/device_form.vue'
import DeviceTypeForm from './formComponent/device_type_form.vue'
export default {
  components: {
    DeviceForm,
    DeviceTypeForm
  },
  data() {
    return {
      instrumentList: [],
      select_type: '',
      tools_list: [],
      dialog: {
        addType: false,
        delType: false,
        setType: false,
        add: false,
        del: false,
        set: false
      },
      // 设备类型
      addType: {
        name: '',
        remark: ''
      },
      setType: {},
      // 设备
      add: {
        deviceName: '',
        deviceType: '',
        accendant: '',
        instrumentModel: '',
        remark: ''
      },
      set: {},
      loading: false
    }
  },
  mounted() {
    this.getToolFun()
  },
  methods: {
    // 设备类型行单击
    rowClick(row) {
      this.select_type = row.id
      this.getToolFun(this.select_type)
    },
    // 获取指定类别的设备列表
    async getToolFun(id) {
      this.loading = true
      let req = { deviceType: id || this.select_type }
      let res = await api.getTooAlllList(req)
      this.tools_list = res.data
      this.loading = false
    },
    // 新建设备类型按下
    addTypeClick() {
      this.dialog.addType = true
    },
    // 新建设备类型函数
    async addTypeFun() {
      let bool = this.$refs.addTypeForm.validate()
      if (!bool) return
      let req = this.addType
      let res = await api.addType(req)
      if (res.code == 0) {
        this.$msg.success('添加成功')
        this.dialog.addType = false
        this.getInstruments()
        this.$refs.addTypeForm.resetFields()
      }
    },
    // 修改设备类型按下
    setTypeClick(row) {
      this.setType = JSON.parse(JSON.stringify(row))
      this.dialog.setType = true
    },
    // 修改设备类型函数
    async setTypeFun() {
      let bool = this.$refs.setTypeForm.validate()
      if (!bool) return
      let req = this.setType
      let res = await api.setType(req)
      if (res.code == 0) {
        this.$msg.success('修改成功')
      } else {
        this.$msg.error(res.msg)
      }
      this.dialog.setType = false
    },
    // 删除设备类型按下
    dleTypeClick(row) {
      this._catch = row
      this.dialog.delType = true
    },
    // 删除设备类型函数
    async dleTypeFun() {
      let req = [this._catch.id]
      let res = await api.delType(req)
      if (res.code == 0) {
        this.getInstruments()
      } else {
        this.$msg.error(res.msg)
      }
      this.dialog.delType = false
    },
    // 新建设备按下
    addClick() {
      this.dialog.add = true
    },
    // 新建设备函数
    async addFun() {
      let bool = this.$refs.addForm.validate()
      if (!bool) return
      let req = this.add
      this.addCatch = req
      let res = await api.add(req)
      if (res.code == 0) {
        this.$msg.success('添加成功')
        this.dialog.add = false
        this.getToolFun(this.select_type)
        this.$refs.addForm.resetFields()
      }
    },

    // 修改设备按下
    setClick(row) {
      this.set = JSON.parse(JSON.stringify(row))
      this.dialog.set = true
    },
    // 修改设备函数
    async setFun() {
      let bool = this.$refs.setForm.validate()
      if (!bool) return
      let res = await api.set(this.set)
      if (res.code == 0) {
        this.$msg.success('修改成功')
        this.dialog.set = false
        this.getToolFun()
      }
    },
    // 删除设备按下
    delClick(row) {
      this._catch = row
      this.dialog.del = true
    },
    // 删除设备
    async delFun() {
      let req = [this._catch.id]
      console.log(req)
      let res = await api.del(req)
      if (res.code == 0) {
        this.$msg.success('删除成功')
        this.getToolFun(this.select_type)
      }
      this.dialog.del = false
    }
  }
}
</script>

<style>
</style>